<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        li {
            list-style: none;
        }

        div {
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <h3>.lazy修饰符</h3>
            <p>
                请输入:<input type="text" v-model="message">
            </p>
            <p>
                请输入.lazy:<input type="text" v-model.lazy="message">
            </p>
            <p>
                <!-- input输入框的内容发生改变 => data中的数据也会同步更新 -->
                message:{{message}}
            </p>
            <p>
                <!-- 当数据改变 视图更新 input框的value值改变 -->
                <button @click="message=''">清空</button>
            </p>
        </div>
        <div>
            <h3>.number修饰符</h3>
            <p>
                购买的数量:<input type="text" v-model.number="num">
            </p>
            <p>
                <!-- input输入框的内容发生改变 => data中的数据也会同步更新 -->
                num:{{num}}
            </p>
            <p>
                <!-- 当数据改变 视图更新 input框的value值改变 -->
                <button @click="num=''">清空</button>
            </p>
        </div>
        <div>
            <h3>.trim修饰符</h3>
            <p>
                购买的数量:<input type="text" v-model.trim="user">
            </p>
            <p>
                <!-- input输入框的内容发生改变 => data中的数据也会同步更新 -->
                user:{{user}}
            </p>
            <p>
                <!-- 当数据改变 视图更新 input框的value值改变 -->
                <button @click="user=''">清空</button>
            </p>
        </div>

    </div>
</body>
<script>

    // v-model的修饰符

    // .lazy
    // 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步
    // 添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步


    // .number
    //     如果想自动将用户的输入值转为数值类型，可以给 v - model 添加 number 修饰符：


    // .trim
    //     如果要自动过滤用户输入的首尾空白字符，可以给 v - model 添加 trim 修饰符：

    var vm = new Vue({
        el: "#app",
        data: {
            message: "",
            num: null,
            user: "",
        },
        methods: {

        },
        watch: {
            num(newVal) {
                console.log(1, newVal);
            },
            user(newVal) {
                console.log(1, newVal);
            }
        }

    })



</script>

</html>